【jQuery】jquery validation插件讲解

学习时间:2017.4.26-2017.4.30

参考资料:http://www.imooc.com/learn/385

基本验证方法

required:必填

remote:远程校验

minlength:最小 长度

maxlength:最大长度

rangelength:长度范围

min:最小值

max:最大值

range:值范围

email:email格式

url:url格式

date:日期

dateISO:ISO日期

number:数字

digits:整数

equalTo与另一个元素值相等

remote:默认get,可以传递json、文字等

同时remote还有一些属性 //没有成功

url

type:可以修改成POST

Data:数据里面可以先登录时间,loginTime:function(){return + new Date;}这个技巧可以将字符串转换成数字。

rangelength:[最小值,最大值]

注意min和max说的是值,如果这个值是数字,输入字符的话会提示请输入数字。

如果需要的是email,则email:true

url也是一样的

date日期,如果输入的时期是有效的,才能通过,能被Date. parse方法识别都能通过。

由于date校验方法十分广泛,有一个dateISO标准日期格式校验,必须是yyyy-mm-dd或者yyyy/mm/dd这种形式。

number:只能是数字,可以使负数,小数

digits:只能是非负整数

equalTo:这各常用的地方是确认密码时。

高级API

valid()方法:检查表单或某些元素是否有效

rules()方法:获取表单元素的校验规则

rules(“add”,rules)向表单元素添加校验规则

rules(“remove”,rules)删除表单元素校验规则

这里注意rules只能针对子元素

validator对象

validate方法返回validator对象,validator对象有很多有用的方法。

Validator.form()验证表单是否有效,返回true or false

Validator.element(element) 验证某个元素是否有效,返回true/false

Validator.resetForm()把表单恢复到验证前原来的状态

Validator.showErrors(errors)针对某个元素显示特定的错误信息

Validator.numberOfInvalids() 返回无效的元素数量

浏览器控制台换行shift+enter

validator对象还有很多静态方法,不需要捕获,直接使用。

jquery.validator.addMethod(name,method[,message]) 增加自定义的验证方法

jQuery.validator.format(template,argument,argumentN…)格式化字符串

jQuery.validator.setDefaults(options) 修改插件默认设置

jQuery.validator.addClassRules(name,rules)为某些包含名为name的class增加组合验证类型

validate()方法配置项

submitHandler 通过验证后运行的函数,可以加上表单提交方法

submitHandler :function(form){console.log($(form).serialize())}

invalidHandler 无效表单运行后触发的函数

invalidHandler :function(event,validator){console.log($(form).serialize())}

ignore 对某些元素不进行验证

rules 定义校验规则

每个规则都可以用depends判断条件

本身有参数的话加上param传递参数即可。

messages定义提示信息

groups 对一组元素的验证,用一个错误提示信息,用errorPlacement控制把出错信息放在哪里。

validate()方法配置项

onsubmit 是否在提交时验证

onfocusout 是否在获取焦点时验证

onkeyup 是否在敲击键盘时验证

onclick 是否在鼠标点击时验证 一般用于checkbox或者radio

focusInvalid 提交表单后,未通过的表单是否获得焦点

focusCleanup 当未通过的验证元素获得焦点时,是否移除错误信息

errorClass 指定错误提示的css类名,可以自定义错误提示的样式

validClass 指定验证通过的css类名

errorElement 使用什么标签标记错误

wrapper 使用什么标签把上面的errorElement包起来

errorLabelContainer 把错误信息统一放在一个容器中

errorContainer 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变成显示,无错时隐藏。

showErrors 可以显示总共多少个未通过验证的元素

errorPlacement 自定义错误信息放到哪里

success 要验证的元素通过验证后的动作

highlight 可以给未通过的元素加效果

unhighlight 去除未通过验证的元素的效果

选择器扩展

:blank 选择所有值为空的元素

:filled 选择所有值不为空的元素

:unchecked 选择所有没有被选择的元素

自定义验证方法

jQuery.validator.addMethod(name,method[,message])

name:方法名称

method:function(value,element,params)

message:提示信息

additional-methods.js 包含了很多扩展验证方法

可以参考这个库

客户端校验安全性

在数据被输入程序前必须对数据合法性的检验,非法输入问题是最常见的web应用程序安全漏洞

所有提交的表单数据,都必须验证两次,即提交前在客户端验证,提交后在服务器端再次验证,保证数据的合法性。

服务器端不要相信任何的客户端数据。